$(function() {
	//加载头部文件
	$("#index-header").load("./header.html", function() {
		$("#index-header header li").eq(5).children().addClass("header-active");
		$("#index-header header li").hover(function() {
			$(this).children().addClass("header-active").parent().siblings().children().removeClass("header-active");
		}, function() {
			$("#index-header header li").eq(5).children().addClass("header-active").parent().siblings().children().removeClass("header-active");
		});
		
	});
		$("#myinfo-con-bottom").html(`<h2>
								<a>
									<p>0</p>
									<p>图片</p>
								</a>
								<a>
									<p>30</p>
									<p>整屋</p>
								</a>
								<a>
									<p>20</p>
									<p>文章</p>
								</a>
								<a>
									<p>20</p>
									<p>回答</p>
								</a>
							</h2>
	
							<article>
								<input placeholder="在此处键入分享题目" id="myinfo-title"></input>
								<button id="myinfo-add">+</button>
								<input id="myinfo-describe" placeholder="键入图片描述"></input>
								<div id="myinfo-direction">
	
								</div>
							</article>`);			
	$("#myinfo-con-left li").click(function() {
		$(this).addClass("myinfo-active").siblings().removeClass("myinfo-active");
		switch($(this).index()) {
			case 0:
				$("#myinfo-con-bottom").html(`<h2>
							<a>
								<p>0</p>
								<p>图片</p>
							</a>
							<a>
								<p>30</p>
								<p>整屋</p>
							</a>
							<a>
								<p>20</p>
								<p>文章</p>
							</a>
							<a>
								<p>20</p>
								<p>回答</p>
							</a>
						</h2>

						<article>
							<input placeholder="在此处键入分享题目" id="myinfo-title"></input>
							<button id="myinfo-add">+</button>
							<input id="myinfo-describe" placeholder="键入图片描述"></input>
							<div id="myinfo-direction">

							</div>
						</article>`);

				break;
			case 1:
				$("#myinfo-con-bottom").html(`
						<section id="Course">
							<h2>设计师：</h2>
							<img src="img/designer1.png"/>
							<div id="addCourse">+<br />在此处添加进程</div>
						</section>
						<ul id="courseList">
							<li>10.05  设计施工的步骤</li>
							<li>10.05  设计施工的步骤</li>
							<li>10.05  设计施工的步骤</li>
							<li>10.05  设计施工的步骤</li>
							<li>10.05  设计施工的步骤</li>
						</ul>`);
				break;
			case 2:
				$("#myinfo-con-bottom").html(`<h2>
							<a>
								<p>0</p>
								<p>图片</p>
							</a>
							<a>
								<p>30</p>
								<p>整屋</p>
							</a>
							<a>
								<p>20</p>
								<p>文章</p>
							</a>
							<a>
								<p>20</p>
								<p>回答</p>
							</a>
						</h2>
						<div class="subscribe">
							<h2>空间</h2>
							<article class="tag">
								<div class="tagActive"><em>客厅</em><span></span></div>
								<div class="tagActive"><em>餐厅</em><span></span></div>
								<div class="tagActive"><em>卫生间</em><span></span></div>
								<div class="tagActive"><em>客厅</em><span></span></div>
								<div class="tagActive"><em>客厅</em><span></span></div>
								<div class="tagActive"><em>儿童房</em><span></span></div>
								<div class="tagActive"><em>客厅</em><span></span></div>
								<div><em>客厅</em><span></span></div>
								<div><em>客厅</em><span></span></div>
								<div><em>客厅</em><span></span></div>
				
							</article>
						</div>
						<div class="subscribe">
							<h2>热门</h2>
							<article class="tag">
								<div class="tagActive">收纳<span></span></div>
								<div class="tagActive">小户型<span></span></div>
								<div>摆件厅<span></span></div>
								<div>色彩搭配<span></span></div>
								<div class="tagActive">绿植<span></span></div>
								<div>玄关<span></span></div>
							</article>

						</div>`);
				break;
			case 3:
			$("#myinfo-con-bottom").html(``);
				break;
			case 4:
			$("#myinfo-con-bottom").html(`<h2 id="info-tit">
							<div>
								<p>关注</p><br />
								<span>0</span>
							</div>
							<div id="info-img"><img src="img/info-img.png" alt="" /></div>
							
							<div>
								<p>被关注</p><br />
								<span>23</span>
							</div>
						</h2>
						<ul id="info">
							<li><img src="img/info1.png"/><span> 昵称：</span><p>蘑蘑蘑蘑BY大蘑菇</p> <i>></i></li>
							<li><img src="img/info2.png"/><span> 性别：</span><p>女 </p><i>></i></li>
							<li><img src="img/info3.png"/><span> 生日：</span><p>1995.06.23</p><i>></i></li>
							<li><img src="img/info4.png"/><span> 位置：</span><p>杭州 </p><i>></i></li>
							<li><img src="img/info5.png"/><span> 简介：</span><p> </p> <i>></i></li>
							<li><img src="img/info6.png"/><span>手机：</span><p> 18530088810</p> <i>></i></li>
						</ul>`);
				break;
		}
		$(".tag div").click(function(){
		$(this).toggleClass("tagActive");
	});
	});

	//	返回顶部
	$("#index-top").click(function() {
		document.body.scrollTop = 0;
		document.documentElement.scrollTop = 0;
	});
	//加载底部文件
	$("#index-footer").load("./footer.html");
});